<template>
  <div class="container">
    <page-table :func="func"
    >
      <template v-slot:moreoperation="{data}">
        <el-button v-if="data.row.status==1 || (data.row.refundTotal && data.row.totalPrice != data.row.refundTotal)"
				 	type="danger" size="small"
					@click="refund(data.row)"
					v-permission="'pay:wxrefund'">申请退款</el-button>
        <!-- <el-button
				 	type="danger" size="small"
					@click="refund(data.row)"
					v-permission="'pay:wxrefund'">申请退款</el-button> -->


      </template>
			<template v-slot:billNoList="{data}">
				{{ data.row.billNoList.join("，") }}
			</template>
			<template v-slot:status="{data}">
				{{ payStatus[data.row.status] }}
			</template>
			<template v-slot:successTime="{data}">
					{{ data.row.successTime | parseTime }}
			</template>
    </page-table>
    <el-dialog
    :title="'申请退款--'+refundForm.no"
    :visible.sync="show">
			<div>可退款金额：{{ canRefundTotal }}</div>
			<json-form :options="options" direction="h" :form="refundForm">

			</json-form>
			<span slot="footer">
					<el-button @click="show=false">取消</el-button>
					<el-button type="primary" @click="dialogConfirm">确认</el-button>
			</span>
    </el-dialog>
  </div>
</template>
<script>
import pageTable from "@/components/page-table.vue"
import jsonForm from "@/components/json-form.vue"
import func from "./index.js"
import {refundRequest,getCanRefundCount} from "@/apis/pay/index"
import dayjs from "dayjs"
export default {
	name:"wx_order",
	components:{
		pageTable,
		jsonForm
	},
	data(){
		return {
			func,
			show:false,
			options:[
				{
					key:"refundPrice",
					type:"el-input",
					label:"退款金额",
					props:{
						type:"number",
						placeholder:"默认为全额退款"
					}
				},
				{
					key:"reason",
					type:"el-input",
					label:"退款原因",
					props:{
						type:"textarea",
						placeholder:"商家退款"
					}
				},
				{
					key:"billNo",
					type:"el-select",
					label:"退款账单",
					readStore:"refundBillList",
					width:"220%"
				},
			],
			refundForm:{},
			payStatus:{
				"0":"未支付",
				"1":"已支付",
				"2":"已过期",
				"3":"退款中",
				"4":"已退款",
				"5":"退款异常",
				"6":"退款关闭"
			},
			canRefundTotal:0,
		}
	},
	methods:{
		refund(row){
			console.log(row)
			this.refundForm = {...row,billNo:row.billNoList[0]}
			this.show = true
			this.$store.commit("option/setRefundBillList",row.billNoList.map(item=>({label:item,value:item})))
			this.getRefundTotal()
		},
		dialogConfirm(){
			let form = {
				no:this.refundForm.no,
				refundPrice:this.refundForm.refundPrice || "",
				reason:this.refundForm.reason || "商家退款",
				billNo:this.refundForm.billNo
			}
			refundRequest(form).then(res=>{
				if(res.data){
					this.show = false
				}
			})
		},
		getRefundTotal(){
			getCanRefundCount(this.refundForm.no).then(res=>{
				this.canRefundTotal = res.data
			})
		}
	},
	filters:{
		parseTime(date){
			if(!date)return ""
			return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
		}
	}
}
</script>